<template>
  <!-- 人员操作 -->
  <h-modal class="event-modal" v-model="show" :title="type == 'add' ? '添加':'编辑'" @submit="submit">
    <a-form-model ref="ruleForm" :model="form" :rules="rules" size="large">
      <a-row :gutter="100">
        <a-col :span="12">
          <a-form-model-item label="账号" prop="account">
            <a-input style="width: 100%" size="large" :maxLength="50" v-model="form.account" placeholder="请输入账号"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="类型" prop="type">
            <a-select v-model="form.type" placeholder="请选择">
              <a-select-option value="0">个人</a-select-option>
              <a-select-option value="1">企业</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="所在平台" prop="platform">
            <a-input style="width: 100%" :maxLength="50" size="large" v-model="form.platform" placeholder="请输入所在平台"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="链接" prop="link">
            <a-input style="width: 100%" size="large" :maxLength="50" v-model="form.link" placeholder="请输入链接"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="备注">
            <a-textarea style="width: 100%" size="large" :maxLength="300" v-model="form.remark" placeholder="请输入备注"></a-textarea>
          </a-form-model-item>
        </a-col>
      </a-row>

    </a-form-model>
  </h-modal>
</template>

<script>
import moment from 'moment';
// eslint-disable-next-line
import { addInternetAccount, editInternetAccount } from '@/api/db';
import cloneDeep from 'lodash/cloneDeep';

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
        if (val) {
          // detailAccount().then(res => {
          //   this.form = res.data || {};
          //   this.$set(this.form, 'isLayered', !!this.form.isLayered);
          // });
        }
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    }
  },
  data() {
    return {
      moment,
      show: false,
      form: {},
      type: 'add',
      rules: {
        account: [{ required: true, message: '请输入' }],
        type: [{ required: true, message: '请输入' }],
        platform: [{ required: true, message: '请输入' }],
        link: [{ required: true, message: '请输入' }]
      }
    };
  },
  methods: {
    add() {
      // const that = this;
      this.type = 'add';
      this.$nextTick(() => {
        this.form = {};
        this.$refs.ruleForm && this.$refs.ruleForm.resetFields();
      });
    },
    edit(form) {
      this.type = 'edit';
      this.form = { ...this.form, ...form };
    },
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.type == 'add') {
            addInternetAccount(this.form).then(res => {
              this.$message.success('创建成功');
              this.show = false;
              this.$emit('submit', cloneDeep(this.form));
              this.form = cloneDeep({});
            });
          } else if (this.type == 'edit') {
            editInternetAccount(this.form).then(res => {
              this.$message.success('编辑成功');
              this.show = false;
              this.$emit('submit', cloneDeep(this.form));
              this.form = cloneDeep({});
            });
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>

<style>

</style>
